{% extends 'base.html' %}
{% block title %}Brispon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
/* beautiful CSS dates - Kroc Camen - camendesign.com
   creative commons 3.0 attribution. share + remix this, just include "Kroc Camen" and/or "camendesign.com" in your CSS */
/* ======================================================================================================================= */

a[rel~=bookmark]        {display: block; position: relative; width: 60px; margin-bottom: 18px;
                 border: 1px solid #888885; -moz-border-radius: 5px; -webkit-border-radius: 5px;
/* day */            font: 24px/35px "Helvetica Neue", Arial, sans-serif; text-align: center;
                 letter-spacing: 2px; text-decoration: none; color: #666;
                 background: #fcfcfc url("images/date-day-bg.png") repeat-x left 18px;}
a[rel~=bookmark] sup        /* lift the suffix, so that the number is fully centered */
                {position: absolute; padding-top: 4px;
                 font-size: 10px; line-height: 10px; letter-spacing: normal;}

/* year + month */
a[rel~=bookmark] abbr       { font: 10px Verdana, sans-serif; letter-spacing: normal; color: white;
                 -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px;}
/* month */
a[rel~=bookmark]>:first-child   {width: 50px; margin: -1px 0 0 -1px; padding: 0 5px; border: 1px solid #832a28;
                 line-height: 16px; text-align: left; text-transform: uppercase;
                 background: #a33537 url("images/date-month-bg.png") repeat-x bottom left;}
/* year */
a[rel~=bookmark] sup+abbr   {position: absolute; top: 0; left: 0; width: 52px; padding: 0 3px;
                 border: 1px solid #a33537; border-bottom: 1px solid #832a28;
                 line-height: 14px; color: #eaa; text-align: right;}
/* time */
a[rel~=bookmark] sub        {display: none; height: 17px; border-top: 1px solid #bbd; margin: 0 3px; color: #aac;
                 font: 9px/16px Verdana, sans-serif; letter-spacing: normal; text-align: center;}

/* ======================================================================================================================= */
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script>
</script>
{% endblock%}

{% block content %}
<div>
  <table>
  <thead>
    <tr>
      <th>Date</th>
      <th>Event</th>
      <th>Store</th>
      <th>Contents</th>
    </tr>
  </thead>
  <tbody>
  {% for event in events %}
	<tr>
      <td>
      <a rel="bookmark" herf="#">
        <abbr title="{{ event.sdate|date:"I" }}">{{ event.sdate|date:"N" }}</abbr> {{ event.sdate|date:"j" }}<sup>th</sup> <abbr>{{ event.sdate|date:"D" }}</abbr>
      </a> - 
      <a rel="bookmark" herf="#">
        <abbr title="{{ event.edate|date:"I" }}">{{ event.edate|date:"N" }}</abbr> {{ event.edate|date:"j" }}<sup>th</sup> <abbr>{{ event.sdate|date:"D" }}</abbr>
      </a>
       {{ event.sdate.year }}{{ event.sdate.month }}{{ event.sdate.day }}-{{ event.edate.year }}{{ event.edate.month }}{{ event.edate.day }}</td>
      <td><a href="{{ event.url }}">{{ event.title }}</a></td>
      <td><a href="{{ event.store.url }}">{{ event.store }}</a></td>
      <td>{{ event.description }} [coupon]</td>
    </tr>
  {% endfor %}
  <tbody>
  </table>
</div>
      
{% endblock %}
